<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询字符串</title>
</head>
<body>
</body>
<script>
    /**
     * 一,查询字符串(手动方法拼接)
     * 1.location 的多数信息都可以通过上面的属性获取。但是 URL 中的查询字符串并不容易使用。
     * 2.location.search 返回了从问号开始直到 URL 末尾的所有内容，但没有办法逐个访问每个查询参数。
     */
    //查询字符串解析函数（该函数解析了查询字符串，并返回一个以每个查询参数为属性的对象）
     let getQueryStringArgs = function(){
        //1.定义字面量对象，用于返回包含查询参数为属性的对象
        let args = {}
        //2.首先删除了查询字符串开头的问号(?)，当然前提是 location.search 必须有内容
        let qs = location.search.length  > 0 ? location.search.substr(1) :'';
        //3.解析字符串 [] ==> [[],[]......]
        for(let arg of qs.split('&').map(key =>key.split('='))){
        console.log('arg-->'+arg);
        //4.decodeURIComponent() 函数对 URI 组件进行解码。
        let name  = decodeURIComponent(arg[0]);
        let value = decodeURIComponent(arg[1]);
        //5.将每一个属性名和属性值对应组装成对象。
        if(name.length){
            args[name] = value;
        }
        }
        return args;
        }
    console.log(getQueryStringArgs());
    // 函数解析
    // 首先删除了查询字符串开头的问号，当然前提是 location.search 必须有内容。解析后
    // 的参数将被保存到 args 对象，这个对象以字面量形式创建。接着，先把查询字符串按照&分割成数组，
    // 每个元素的形式为 name=value。for 循环迭代这个数组，将每一个元素按照=分割成数组，这个数组
    // 第一项是参数名，第二项是参数值。参数名和参数值在使用 decodeURIComponent()解码后（这是因为
    // 查询字符串通常是被编码后的格式）分别保存在 name 和 value 变量中。最后，name 作为属性而 value
    // 作为该属性的值被添加到 args 对象。

    /**
     * URLSearchParams
     * URLSearchParams 提供了一组标准 API 方法，通过它们可以检查和修改查询字符串。给URLSearchParams
     * 构造函数传入一个查询字符串，就可以创建一个实例。这个实例上暴露了 get()、set()和 delete()等方法，
     * 可以对查询字符串执行相应操作。
     */
    let qs = "?q=javascript&num=10"
    let urlParams = new URLSearchParams(qs);
    console.log(urlParams.toString());//q=javascript&num=10
    console.log(urlParams.get('num'));//10
    console.log(urlParams.has('q'));//true
    urlParams.set('page','3');
    console.log(urlParams.toString());//q=javascript&num=10&page=3
    console.log(urlParams.get('page'));//3
    urlParams.delete('q')
    console.log(urlParams.toString());//num=10&page=3
    for(let item of urlParams){
        console.log(item);
    }
    //['num', '10']
    //['page', '3']
</script>
</html>